﻿{extend name="public:base" /}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox">
                <div class="ibox-content">
                    <div id="line" style="width: 100%; height:400px;"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="ibox">
                <div class="ibox-content">
                    <div id="pie" style="width: 100%; height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script src="__ADMIN__/js/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById("line"));
    var time_list = `{$time_list}` ? JSON.parse(`{$time_list}`) : [];
    var video_list = `{$video_list}` ? JSON.parse(`{$video_list}`) : [];

    var option = {
        xAxis: {
            name: '生成日期',
            type: 'category',
            data: time_list
        },
        yAxis: {
            name: '生成数量',
            type: 'value'
        },
        series: [
            {
                data: video_list,
                type: 'line',
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ],
        tooltip: {
            type: 'cross',
            trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
            backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
            borderRadius: 8,           // 提示边框圆角，单位px，默认为4
            padding: 10,                // 提示内边距，单位px，默认各方向内边距为5，
            textStyle: {
                color: '#fff'
            },
            valueFormatter: (value) => '视频生成数量' + value + '个'
        },
    };

    myChart.setOption(option);

    // 环形图
    var pieChart = echarts.init(document.getElementById("pie"));
    var pieOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: `{$pie_series}` ? JSON.parse(`{$pie_series}`) : []
            }
        ]
    };
    pieChart.setOption(pieOption);
</script>

{/block}